import React, { useEffect, useState, useRef } from 'react'
import { useModel, history, useSearchParams } from '@umijs/max'
import { ProTable } from '@ant-design/pro-components'
import { Button, Input, Modal, Form, InputNumber, App } from 'antd'
import PlatformDataDetails from '@/components/PlatformDataDetails/PlatformDataDetails'

export default () => {
  const { GetPlatDataList } = useModel('PlatformData')
  const { message, modal } = App.useApp()

  const [pageSize, setPageSize] = useState(10) //  每页数量
  const [currentPage, setCurrentPage] = useState(1) //  当前页码

  const tableRef = useRef()
  const platformDataDetailsRef = useRef()

  const handleCheckOrder = id => {
    platformDataDetailsRef.current.onOpenDrawer(id)
  }

  const originColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 60,
      hideInSearch: true
    },
    {
      title: '平台名称',
      dataIndex: 'name'
    },
    {
      title: '联系人',
      dataIndex: 'linker'
    },
    {
      title: '联系人手机号',
      dataIndex: 'tel',
      hideInSearch: true
    },
    {
      title: '签约价',
      dataIndex: 'sign_price',
      hideInSearch: true
    },
    {
      title: '结算方式',
      dataIndex: 'settlement_method',
      hideInSearch: true
    },
    {
      title: '累积总结算',
      dataIndex: 'partner_accumulate_total_settle_amount',
      hideInSearch: true
    },
    {
      title: '签约结算',
      dataIndex: 'partner_sign_settle_amount',
      hideInSearch: true
    },
    {
      title: '订单成交结算',
      dataIndex: 'partner_order_deal_settle_amount',
      hideInSearch: true,
      render: (text, record) => {
        return (
          <span
            onClick={() => handleCheckOrder(record.id)}
            style={{ color: '#1890ff', fontWeight: 'bold', cursor: 'pointer' }}
          >
            {text}
          </span>
        )
      }
    },
    {
      title: '系统交付时间',
      dataIndex: 'deliver_time',
      hideInSearch: true,
    },
    {
      title: '系统交付时间',
      dataIndex: 'deliver_time',
      hideInTable: true,
      valueType: 'dateTimeRange',
      search: {
        transform: value => {
          return {
            deliver_time_start: value[0],
            deliver_time_end: value[1]
          }
        }
      }
    }
  ]

  return (
    <>
      <ProTable
        headerTitle='签约平台数据'
        actionRef={tableRef}
        request={async params => {
          let param = {
            per_page: params.pageSize,
            page: params.current,
            name: params.name,
            linker: params.linker,
            deliver_time_start: params.deliver_time_start,
            deliver_time_end: params.deliver_time_end
          }

          const res = await GetPlatDataList(param)
          const { data, total } = res

          setCurrentPage(params.current)
          setPageSize(params.pageSize)

          return {
            data: data,
            success: true,
            total: total
          }
        }}
        rowKey='id'
        pagination={{
          pageSize: pageSize,
          current: currentPage,
          showSizeChanger: true
        }}
        search={{
          defaultCollapsed: false,
          labelWidth: 'auto',
          span: 8
        }}
        columns={originColumns}
      />
      <PlatformDataDetails ref={platformDataDetailsRef} />
    </>
  )
}
